<template>
  <div>
    <Content>
      <div class="bargain-list-container">
        <div class="bargain-list-goods" v-for="item in bargainList" :key="item.id">
            <div class="bargain-list-img">
              <img :src="item.pic">
            </div>
            <div class="bargain-list-right">
              <p class="p1">{{item.name}}</p>
              <p class="p3">{{item.characteristic}}</p>
              <p class="p2">￥:{{item.minPrice}}</p>
            </div>
        </div>
      </div>
    </Content>
  </div>
</template>

<script>
import Content from "../../components/content/Content";

export default {
  data() {
    return {
      bargainList: [],
    };
  },
  components:{Content},
  mounted() {
    this.$API.getBargain().then((res) => {
      console.log(res);
        this.bargainList = res.data.data;
        this.bargainList = this.bargainList.slice(10,30);
    });
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.bargain-list-container {
  width: 100%;
  height: 100vh;
  margin-top:64px;
  /* background-color: cadetblue;*/
}
.bargain-list-goods {
  width: 100%;
  height:5rem;
  border-top: 1px solid lightgray;
  display: inline-flex;
  align-items: center;
  margin-bottom:0.3rem;
}
.bargain-list-img {
  width:30%;
  height:100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.bargain-list-right{
    width:73%;
    height:100%;
}
.bargain-list-img img{
    width:90%;
    height:80%;
}
.p1{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  overflow: hidden;
  font-size:0.6rem;
  margin-top:13px;
}
.p3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  overflow: hidden;
  font-size:0.5rem;
  font-size:gray;
  margin-top:7px;
}
.p2{
  margin-top:27px;
  font-size: 0.4rem;
  color:red;
}
</style>